<template>
  <svg
    xmlns:xlink="http://www.w3.org/1999/xlink"
    height="100%"
    version="1.1"
    :viewBox="svg.viewBox"
    width="100%"
    :style="style">
    <use xlink:href="#aplayer-${type}"></use>
    <path class="aplayer-fill" :d="svg.d"></path>
  </svg>
</template>
<script>
import { defineComponent, computed, toRefs } from 'vue'

export default defineComponent({
  name: 'icon',
  props: {
    type: String
  },
  setup (props) {
    const { type } = toRefs(props)
    const requireAssets = require.context('../../assets/svg', false, /\.svg$/)
    const SVGs = requireAssets.keys().reduce((svgs, path) => {
      const inlineSvg = requireAssets(path)
      const [raw, viewBox, d] = inlineSvg.match(/^<svg.+?viewBox="(.+?)".*><path.+?d="(.+?)".*><\/path><\/svg>$/)

      svgs[path.match(/^.*\/(.+?)\.svg$/)[1]] = {
        viewBox,
        d
      }
      return svgs
    }, {})
    const svg = computed(() => {
      if (type.value === 'prev' || type.value === 'next') {
        return SVGs.skip
      }
      return SVGs[type.value] || {}
    })
    const style = computed(() => {
      if (type.value === 'next') {
        return { transform: 'rotate(180deg)' }
      }
      return {}
    })
    return {
      svg,
      style
    }
  }
})
</script>
